 <template>
     <div class="playlist">
        <div class="title">{{title}}({{createPlaylist.length}})</div>
        <div class="list">
            <div class="list_item" 
            v-for="(item,index) in createPlaylist"
            :key="index"
            @click="goPlayDetail(item.id)"
            >
                <img :src="item.coverImgUrl" alt="">
                <div class="name">{{item.name}}</div>
                <div class="count">{{item.trackCount}}首</div>
            </div>
        </div>    
     </div>
 </template>
 
 <script>
 export default {
     name: 'playlist',
     props: [
         'createPlaylist',
         'title'
     ],
     data() {
         return {
 
         };
     },
     computed: {
 
     },
     created() {
         console.log(this.createPlaylist    )
     },
     mounted() {
 
     },
     watch: {
 
     },
     methods: {
         goPlayDetail(id){
             this.$router.push({path:'/playListDetail',query:{id}})
             console.log(id)
         }
     },
     components: {
 
     },
 };
 </script>
 
 <style scoped lang="less">
 @mainColor:#2f3640;
@itemecolor:#E03F40;
@navLightColor:#273c75;
@textColor:#fff;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
 .playlist{
     width: 100%;
     .title{
          padding: 10px 25px;
          border-top: 1px solid;
          border-bottom: 1px solid; 
     }
     .list{
         .position_flex(flex-start);
         width: 100%;
         flex-wrap: wrap;
         .list_item{
             width: 150px;
             height: 220px;
             margin: 10px 43px;
             cursor: pointer;
             img{
                 width: 100%;
                 height: 150px;
             }
             div{
                 margin-bottom: 10px;
             }
             .count{
                 color: #ccc;
             }
         }
     }
 }
 </style>
 